<template>
    <div id="grouping-content">
        <div class="list-left-div">
            <el-input placeholder="编号/名称" v-model="searchValue" style="width:200px;margin-right:20px" size="mini"></el-input>
            <el-button class="left-p" type="primary" @click="getSearchList(searchValue)">查询</el-button>
        </div>
        <div id="main-content" v-if="cutInfo.label == '外部'">
            <div class="content-table">
                <el-table
                    auto-resize
                    resizable
                    stripe
                    border
                    v-loading="tableLoading"
                    element-loading-text="加载中"
                    size="mini"
                    height="100%"
                    style="cursor: pointer; width: 100%"
                    highlight-current-row
                    highlight-hover-row
                    :data="dataSource"
                    :default-sort="{ prop: sortProp, order: sortOrder }"
                    @sort-change="changeTableSort"
                >
                    <el-table-column prop="" label="类型" width="270" show-overflow-tooltip>对手组</el-table-column>
                    <el-table-column prop="nGroupId" label="对手组编号" width="270" :formatter="getValueIs" show-overflow-tooltip sortable="custom">
                    </el-table-column>
                    <el-table-column prop="cGroupName" label="对手组名称" width="270" :formatter="getValueIs" show-overflow-tooltip sortable="custom">
                    </el-table-column>
                    <el-table-column prop="cRemark" label="备注" :formatter="getValueIs" width="270" show-overflow-tooltip sortable="custom">
                    </el-table-column>
                    <el-table-column prop="" label="所属层级" width="270" show-overflow-tooltip>外部</el-table-column>
                </el-table>
            </div>
            <RiskPagination :paging="pages" @page-change="handleCurrentChange"></RiskPagination>
        </div>
        <div id="main-content" v-else>
            <div class="content-table">
                <el-table
                    auto-resize
                    resizable
                    stripe
                    border
                    v-loading="tableLoading"
                    element-loading-text="加载中"
                    size="mini"
                    height="100%"
                    style="cursor: pointer; width: 100%"
                    highlight-current-row
                    highlight-hover-row
                    :data="listSource"
                    :default-sort="{ prop: listSortProp, order: listSortOrder }"
                    @sort-change="changeTableSortList"
                >
                    <el-table-column prop="cRivalCode" label="交易对手编号" width="200" show-overflow-tooltip sortable="custom"> </el-table-column>
                    <el-table-column
                        prop="cOpponentName"
                        label="交易对手名称"
                        width="200"
                        :formatter="getValueIs"
                        show-overflow-tooltip
                        sortable="custom"
                    >
                    </el-table-column>
                    <el-table-column
                        prop="cOpponentAllName"
                        label="交易对手全称"
                        width="200"
                        :formatter="getValueIs"
                        show-overflow-tooltip
                        sortable="custom"
                    >
                    </el-table-column>
                    <el-table-column
                        prop="cOpponentType"
                        label="对手类型"
                        :formatter="getValueIs"
                        width="190"
                        show-overflow-tooltip
                        sortable="custom"
                    >
                    </el-table-column>
                    <el-table-column prop="cOuterGrade" label="外部评级" :formatter="getValueIs" width="190" show-overflow-tooltip sortable="custom">
                    </el-table-column>
                    <el-table-column prop="cInnerGrade" label="内部评级" :formatter="getValueIs" width="190" show-overflow-tooltip sortable="custom">
                    </el-table-column>
                    <el-table-column prop="cAppraise" label="综合评级" width="210" :formatter="getValueIs" show-overflow-tooltip sortable="custom">
                    </el-table-column>
                    <el-table-column prop="nBankheadId" label="银行总行" width="210" :formatter="getValueIs" show-overflow-tooltip sortable="custom">
                    </el-table-column>
                    <el-table-column
                        prop="nCapital"
                        label="资本金"
                        width="210"
                        :formatter="setFormat"
                        show-overflow-tooltip
                        sortable="custom"
                        align="right"
                    >
                    </el-table-column>
                    <el-table-column
                        prop="nTotalAsset"
                        label="总资产"
                        width="210"
                        :formatter="setFormat"
                        show-overflow-tooltip
                        sortable="custom"
                        align="right"
                    >
                    </el-table-column>
                    <el-table-column
                        prop="nNetAsset"
                        label="净资产"
                        width="210"
                        :formatter="setFormat"
                        show-overflow-tooltip
                        sortable="custom"
                        align="right"
                    >
                    </el-table-column>
                    <el-table-column prop="cTradeClass" label="对手分类" width="210" :formatter="getValueIs" show-overflow-tooltip sortable="custom">
                    </el-table-column>
                </el-table>
            </div>
            <RiskPagination :paging="listPages" @page-change="handleCurrentChangelist"></RiskPagination>
        </div>
    </div>
</template>
<script lang="ts">
import { Component, Vue, Prop, Watch } from 'vue-property-decorator';
import RiskPagination from '@/common/components/risk-pagination.vue';
import { thousandsFormat } from '@/utils/tools';

export interface pages {
    sort?: string;
    total?: number;
    pageSize?: number;
    currentPage?: number;
}

@Component({
    name: 'GroupingInformation',
    components: {
        RiskPagination,
    },
})
export default class GroupingInformation extends Vue {
    private dataSource: any[] = []; // 指令表数据
    private listSource: any[] = []; // 指令表数据
    private sortProp: string = ''; // 排序字段
    private sortOrder: string = ''; // 排序方式
    private listSortProp: string = ''; // 排序字段
    private listSortOrder: string = ''; // 排序方式
    private searchValue: string = ''; // 排序方式
    tableLoading: boolean = false;
    // 分页
    private pages: pages = {
        pageSize: 50,
        currentPage: 1,
        total: 0,
    };
    private listPages: pages = {
        pageSize: 50,
        currentPage: 1,
        total: 0,
    };
    // 默认展示明细字段
    private listParam = {
        cinnerGrade: '',
        copponentName: '',
        couterGrade: '',
        crivalCode: '',
        findInGroup: '',
        groupId: '',
        paging: {
            currentPage: 0,
            pageSize: 0,
        },
        sort: 'to_number(C_RIVAL_CODE) ASC',
    }; // 查询条件
    private searchParam = {
        coppoGrCode: '',
        paging: {
            currentPage: 0,
            pageSize: 0,
        },
        sort: '',
    }; // 查询条件
    @Prop() cutInfo: any;
    mounted() {
        // this.getListData(this.searchParam, this.pages);
        // this.getListDataByGrId(this.listParam, this.pages);
    }
    @Watch('cutInfo', { immediate: true, deep: true })
    watchCutInfo(newVal, oldVal) {
        this.searchValue = '';
        this.listParam.findInGroup = '';
        if (newVal.label == '外部') {
            this.searchParam.coppoGrCode = '';
            this.getListData(this.searchParam, this.pages);
        } else {
            this.listParam.groupId = newVal.id;
            this.listPages.currentPage = 1;
            this.getListDataByGrId(this.listParam, this.listPages);
        }
    }
    // 外部
    getListData(param: any, paging: any): void {
        this.tableLoading = true;
        this.$axios
            .post('/tnOppoGroup/list/data', {
                ...param,
                paging: paging,
            })
            .then((res: any) => {
                // this.dataSource = res.list;
                // console.log('交易对手组11', this.dataSource);
                if (res.list && res.list.length > 0) {
                    this.dataSource = res.list;
                    this.pages.total = res.total;
                } else {
                    this.dataSource = [];
                    this.pages.total = 0;
                }
                this.tableLoading = false;
            })
            .catch(() => {
                this.tableLoading = false;
            });
    }
    // 外部分页
    private handleCurrentChange(): void {
        this.getListData(this.searchParam, this.pages);
    }
    getListDataByGrId(param: any, paging: any): void {
        this.tableLoading = true;
        this.$axios
            .post('/tnOpponent/listDataByGrId', {
                ...param,
                paging: paging,
            })
            .then((res: any) => {
                if (res.list && res.list.length > 0) {
                    this.listSource = res.list;
                    this.listPages.total = res.total;
                } else {
                    this.listSource = [];
                    this.listPages.total = 0;
                }
                this.tableLoading = false;
            })
            .catch(() => {
                this.tableLoading = false;
            });
    }
    // 明细分页
    private handleCurrentChangelist(): void {
        this.getListDataByGrId(this.listParam, this.listPages);
    }
    // 排序改变
    private changeTableSort(column: any): void {
        this.sortProp = column.prop;
        this.sortOrder = column.order;
        let sortType = column.order == 'ascending' ? 'ASC' : column.order == 'descending' ? 'DESC' : '';
        this.searchParam['sort'] = this.findName(column.prop, sortType);
        this.pages.currentPage = 1;
        this.getListData(this.searchParam, this.pages);
    }
    // 排序改变
    private changeTableSortList(column: any): void {
        this.listSortProp = column.prop;
        this.listSortOrder = column.order;
        let sortType = column.order == 'ascending' ? 'ASC' : column.order == 'descending' ? 'DESC' : '';
        this.listParam['sort'] = this.findNameList(column.prop, sortType);
        this.listPages.currentPage = 1;
        this.getListDataByGrId(this.listParam, this.listPages);
    }
    // 获取排序字段名称
    private findName(name: string, order: string): string {
        let value = '';
        if (order != '') {
            switch (name) {
                case 'cOppoGrCode':
                    value = 'C_OPPO_GR_CODE' + ' ' + order;
                    break;
                case 'cOppoGrName':
                    value = 'C_OPPO_GR_NAME' + ' ' + order;
                    break;
                case 'cSourceCode':
                    value = 'C_SOURCE_CODE' + ' ' + order;
                    break;
                case 'cSourceInfo':
                    value = 'C_SOURCE_INFO' + ' ' + order;
                    break;
                case 'cSourceType':
                    value = 'C_SOURCE_TYPE' + ' ' + order;
                    break;
                case 'nGroupId':
                    value = 'to_number(N_GROUP_ID)' + ' ' + order;
                    break;
                case 'cGroupName':
                    value = 'C_GROUP_NAME' + ' ' + order;
                    break;
                case 'cRemark':
                    value = 'C_REMARK' + ' ' + order;
                    break;
            }
        } else {
            value = '';
        }
        return value;
    }
    // 获取排序字段名称
    private findNameList(name: string, order: string): string {
        let value = '';
        if (order != '') {
            switch (name) {
                case 'cRivalCode':
                    value = 'to_number(C_RIVAL_CODE)' + ' ' + order;
                    break;
                case 'cOpponentName':
                    value = 'C_OPPONENT_NAME' + ' ' + order;
                    break;
                case 'cOpponentAllName':
                    value = 'C_OPPONENT_ALL_NAME' + ' ' + order;
                    break;
                case 'cOpponentType':
                    value = 'C_OPPONENT_TYPE' + ' ' + order;
                    break;
                case 'cOuterGrade':
                    value = 'C_OUTER_GRADE' + ' ' + order;
                    break;
                case 'cInnerGrade':
                    value = 'C_INNER_GRADE' + ' ' + order;
                    break;
                case 'cAppraise':
                    value = 'C_APPRAISE' + ' ' + order;
                    break;
                case 'nBankheadId':
                    value = 'N_BANKHEAD_ID' + ' ' + order;
                    break;
                case 'nCapital':
                    value = 'N_CAPITAL' + ' ' + order;
                    break;
                case 'nTotalAsset':
                    value = 'N_TOTAL_ASSET' + ' ' + order;
                    break;
                case 'nNetAsset':
                    value = 'N_NET_ASSET' + ' ' + order;
                    break;
                case 'cTradeClass':
                    value = 'C_TRADE_CLASS' + ' ' + order;
                    break;
            }
        } else {
            value = 'to_number(C_RIVAL_CODE) ASC';
        }
        return value;
    }
    getSearchList(value) {
        if (this.cutInfo.label == '外部') {
            this.searchParam.coppoGrCode = value;
            this.pages.currentPage = 1;
            this.searchParam.sort = 'to_number(N_GROUP_ID) ASC';
            this.getListData(this.searchParam, this.pages);
        } else {
            this.listParam.findInGroup = value;
            this.listPages.currentPage = 1;
            this.listPages.sort = 'to_number(C_RIVAL_CODE) ASC';
            this.getListDataByGrId(this.listParam, this.listPages);
        }
    }
    setFormat(row, column) {
        return thousandsFormat(row[column['property']]);
    }
    getValueIs(row, column) {
        if (row[column['property']] == null || row[column['property']] == ' ' || row[column['property']] == '空') {
            return '--';
        } else {
            return row[column['property']];
        }
    }
    tableRowClassName({ row, rowIndex }) {
        // console.log(rowIndex);
        if (rowIndex % 2 === 0) {
            return 'odd-row';
        } else {
            return 'even-row';
        }
    }
}
</script>
<style lang="scss" scoped>
/deep/ .el-table .odd-row {
    background: #ffffff;
}
/deep/ .el-table .even-row {
    background: #fafafa;
}
#grouping-content {
    height: calc(100vh - 90px);
    .list-left-div {
        width: 100%;
        height: 40px;
        line-height: 30px;
        background: #fff;
        border: 1px solid #cacaca;
        padding-top: 4px;
        padding-left: 10px;
        position: relative;
        display: flex;

        .left-p {
            // position: absolute;
            // // right: 5px;
            // top: 4px;

            .el-icon-search {
                color: #fff;
            }
        }

        & /deep/ .el-button {
            height: 27px;
            padding: 6px;
            margin-top: 2px;
        }
    }
    #main-content {
        margin-top: 3px;
        overflow: hidden;
        .content-table {
            width: 99.9%;
            height: calc(100vh - 190px);
            overflow: auto;
            margin: 0 auto;
            .el-table {
                border: 1px solid #d7d7d7;
                // margin: 0 2px;
            }
        }
    }
}
/deep/ .el-input__icon {
    line-height: 25px !important;
}
</style>
